import React, { Component } from 'react'
import CatelistContainer from './Catelist.style'
export default class Catelist extends Component {
    render() {
        let { list, nav, change } = this.props;
        return (
            <CatelistContainer>
                {/* 左边 */}
                <div>
                    <ul>
                        {
                            Object.keys(list).map((item, index) => {
                                return (
                                    <li key={index}
                                        className={nav === item ? 'active' : ''}
                                        onClick={change.bind(this, item)}>
                                        {item}
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>

                {/* 右边 */}
                <div>
                    <ul>
                        {
                            list[nav] && list[nav].map((item, index) => {
                                return (
                                    <li key={index}>
                                    {item}
                                    </li>
                                )
                            })
                        }

                    </ul>
                </div>
            </CatelistContainer>
        )
    }
}
